<template>
  <div class="side-bar-container">
    <div
      class="left"
      :style="{width: leftWidthToRem}"
    >
      <div
        class="left-wrap"
        :style="{'min-width':utils.pxToFixPx(minWidth)+'px'}"
      >
        <slot name="left"></slot>
      </div>
    </div>
    <div
      class="slider"
      @mousedown="handleMousedown"
    >
      <div
        class="slider-icon-content slider-icon-content1"
        :style="{color:theme}"
      >
        <svg-icon
          class-name="slider-icon"
          icon-class="draggable"
        />
      </div>
      <div
        class="slider-icon-content slider-icon-content-tick"
        :style="{background:theme}"
        @click.stop="handleTriggerExpand"
      >
        <i
          v-show="isExpand"
          class="el-icon-caret-left slider-icon"
        ></i>
        <i
          v-show="!isExpand"
          class="el-icon-caret-right slider-icon"
        ></i>
      </div>
      <div
        class="slider-icon-content slider-icon-content2"
        :style="{color:theme}"
      >
        <svg-icon
          class-name="slider-icon"
          icon-class="draggable"
        />
      </div>
    </div>
    <div
      class="right"
      :style="{width:`calc(100% - ${leftWidthToRem} - 10px)`,'min-width':`calc(100% - ${leftWidthToRem} - 8px)`}"
    >
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    defaultWidth: {
      type: Number,
      default: 250 // 按px格式传入数值即可
    },
    maxWidth: {
      type: [Number, String],
      default: 800 // 按px格式传入数值即可
    },
    minWidth: {
      type: Number,
      default: 200 // 按px格式传入数值即可
    }
  },
  data() {
    return {
      isExpand: true,
      leftWidth: 250,
      orgLeftWidth: 250,
      isMousedown: false,
      clientX: 0
    }
  },
  computed: {
    ...mapState({
      theme: (state) => state.settings.theme
    }),
    leftWidthToRem() {
      return this.utils.pxToRem(this.leftWidth)
    }
  },
  created() {
    document.body.addEventListener('mousemove', this.handleMouseMove)
    document.body.addEventListener('mouseup', this.handleMouseUp)
    this.leftWidth =
      this.defaultWidth > this.maxWidth ? this.maxWidth : this.defaultWidth
  },
  methods: {
    handleTriggerExpand() {
      this.isExpand = !this.isExpand
      if (this.isExpand) {
        this.leftWidth = 250
      } else {
        this.leftWidth = 0
      }
    },
    handleMousedown(event) {
      this.isMousedown = true
      this.clientX = event.clientX
      this.orgLeftWidth = this.leftWidth
    },
    handleMouseMove(event) {
      if (!this.isMousedown) {
        return
      }
      document.body.style.userSelect = 'none'
      const clientX = this.clientX
      const orgLeftWidth = this.orgLeftWidth
      const newLeftWidth = orgLeftWidth - (clientX - event.clientX)
      const maxWidth = this.utils.pxToFixPx(this.maxWidth, 'number')
      // 宽度小于15，自动认为是收起
      // 宽度最大为400
      if (newLeftWidth <= 15) {
        this.leftWidth = 0
        this.isExpand = false
      } else if (newLeftWidth >= maxWidth) {
        this.leftWidth = maxWidth
      } else {
        this.leftWidth = newLeftWidth
        this.isExpand = true
      }
    },
    handleMouseUp(event) {
      document.body.style.userSelect = 'unset'
      this.isMousedown = false
      this.clientX = 0
      this.orgLeftWidth = this.leftWidth
    }
  },
  destroyed() {
    document.body.removeEventListener('mousemove', this.handleMouseMove)
    document.body.removeEventListener('mouseup', this.handleMouseUp)
  }
}
</script>
<style lang="less" scoped>
.side-bar-container {
  display: flex;
  width: 100%;
  height: 100%;
  .left {
    border-top: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
    overflow: auto;
  }
  .left-wrap {
    width: fit-content;
    height: 100%;
    padding: 10px;
  }
  .right {
    // width: calc(100% - 240px);
    flex: 1;
    /*position: relative;*/
    padding: 10px;
    border-top: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
  }
  .slider {
    width: 10px;
    min-width: 8px;
    border: 1px solid #dfe6ec;
    background-color: rgb(231 231 231 / 10%);
    position: relative;
    cursor: w-resize;
  }
  .slider-icon-content {
    width: 10px;
    min-width: 8px;
    height: 26px;
    text-align: center;
    position: relative;
    // color: #F99C34;
    position: absolute;
    left: -1px;
    transform: translateY(-50%);
    background: #ffffff;
    &-tick {
      top: 50%;
      color: #ffffff;
      opacity: 0.8;
      // background: #F99C34;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
    }
    &1 {
      top: calc(50% - 36px);
    }
    &2 {
      top: calc(50% + 36px);
    }
  }
  .slider-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
